<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()"></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @input="jieliu"
    >
    <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="getSearch">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group v-if="keyword">
      <van-cell
      icon="search"
      v-for="(item, idx) in cSuggestList"
      @click="hSearchSuggestion(idx)"
      :key="idx">
      <div v-html="item"></div>
       </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"/>

      <van-cell
      v-for="(item,idx) in history"
      :key="idx"
      :title="item"
       @click="$router.push('/search/result?keyword='+ item)">
       <!-- @click.stop 为了防止冒泡 -->
        <van-icon name="close" @click.stop="hDeleteSearchHistory(idx)"></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 引入lodash组件
import _ from 'lodash'
import { getSuggestion } from '@/api/search'
// 引入持久话模块
import { setItem, getItem } from '@/utils/storage'
export default {
  name: 'Search',
  data () {
    return {
      suggestList: [], // 搜索返回的数组 搜索建议
      keyword: '', // 搜索关键字
      history: getItem('searchHistory') || [] // 保存历史记录
    }
  },
  computed: {
    // 用计算属性实现高亮显示
    cSuggestList () {
      // 对suggestList数组进行字符串替换
      // 对其中的每一项 进行替换 replace 方法只能替换一项 所以要用string.replace(正则 函数)
      // 进行替换
      // RegExp 正则  gi 全局替换
      const reg = new RegExp(this.keyword, 'gi')
      const res = this.suggestList.map(item => {
        return item.replace(reg, function (val) {
          return `<span style="color:red">${val}</span>`
        })
      })
      return res
    }
  },
  methods: {
    async hSearch () {
      // 如果关键字为空 那么返回不发送请求
      if (this.keyword === '') {
        return
      }
      // 发送关键字请求
      const result = await getSuggestion(this.keyword)
      console.log('搜索结果', result)
      this.suggestList = result.data.data.options
      // console.log('搜索结果', this.suggestList)
    },
    // 用来向搜索记录添加新项
    // 搜索记录的基本规则
    // 不能有重复的项
    // 最近的记录应该放在前面
    addHistory (str) {
      // 因为历史记录不能重复 所有需要在添加前查一下该历史记录离有没有
      // 有的话就先删了再添加
      const idx = this.history.findIndex(history => history === str)

      if (this.keyword !== '') {
        if (idx !== -1) {
          this.history.splice(idx, 1)
        }
        // 添加再头部
        this.history.unshift(str)
        // 做持久化
        setItem('searchHistory', this.history)
      }
    },
    // 添加搜索记录的第一种 用户点击搜索建议
    hSearchSuggestion (idx) {
      this.addHistory(this.suggestList[idx])
      // 跳转到搜索结果页‘
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.suggestList[idx]
        }
      })
    },
    // 第二种方法 用户直接进行搜索
    getSearch () {
      this.addHistory(this.keyword)
      // 跳转到搜索页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 用户点击率额删除历史记录
    hDeleteSearchHistory (idx) {
      this.history.splice(idx, 1)
      // 做持久化
      setItem('searchHistory', this.history)
    },
    // 节流
    _jieliu: _.throttle(function () { console.log(this); this.hSearch() }, 500),
    jieliu () {
      if (this.timer) {
        return
      }
      this.timer = setTimeout(() => {
        this.timer = null
        this.hSearch()
      }, 600)
    }
  }
}
</script>
